<template>
    <div>
        <h3>-----------------watch-------------</h3>
        <!-- ref -->
        <input type="text" v-model="age"><br>
        <input type="text" v-model="o1.name"><br>
        <hr>
        <!-- reactive -->
        <input type="text" v-model="o2.work"><br>
        <input type="text" v-model="o2.info.sex"><br>

    </div>
</template>

<script>
import { ref, reactive, watch } from "vue"
export default {
    setup() {

        // 1.----------------ref定义数据---------------------
        let age = ref(20)
        let o1 = ref({ id: 1, name: "李四" })

        // watch(age, (newV, oldV) => {
        //     console.log('监听ref-age：', newV, oldV)
        // })

        // watch(o1, (newV, oldV) => {
        //     console.log('监听ref-o1：', newV, oldV)
        // }, {
        //     deep: true
        // })

        // watch(o1.value, (newV, oldV) => {
        //     console.log('监听ref-o1.value：', newV, oldV)
        // })

        // watch([age, o1.value], (newV, oldV) => {
        //     console.log('监听ref-age-o1', newV, oldV)
        // })

        // watch([age, o1], (newV, oldV) => {
        //     console.log('监听ref-age-o1', newV, oldV)
        // }, { deep: true })


        // 2.-----------------reactive定义数据------------
        let o2 = reactive({ work: 'it', info: { sex: "男" } })


        // 监听整个reactive对象数据
        // watch(o2, (newV, oldV) => {
        //     console.log('监听ref-o2', newV, oldV)
        // })

        // 监听对象中的某一个属性
        // watch(() => o2.work, (newV, oldV) => {
        //     console.log('监听ref-o2.work', newV, oldV)
        // })

        // // 监听对象多个属性变化
        // watch([() => o2.work], (newV, oldV) => {
        //     console.log('监听ref-o2.work', newV, oldV)
        // })

        // watch(() => o2.info.sex, (newV, oldV) => {
        //     console.log('监听ref-o2.info.sex', newV, oldV)
        // })

        // watch(o2.info, (newV, oldV) => {
        //     console.log('监听ref-o2.info', newV, oldV)
        // })

        watch(() => o2.info, (newV, oldV) => {
            console.log('监听ref-o2.info', newV, oldV)
        }, {
            deep: true
        })

        return {
            age,
            o1,
            o2
        }

    }
};
</script>

<style scoped></style>
